<script>
import ComHouseItem from "./com-house-item";
import { timeStampToDate } from "@/utils/utilsNew";
import { mapGetters } from "vuex";
import { menuHandler } from "@/handler/menuHandler";
import { HOUSE_OWER_PHONE } from "@/config/menuId";
import { getMemberPower } from '@/api/user';

export default {
  components: {
    ComHouseItem,
  },
  props: {
    tableList: {
      type: Array,
      default() {
        return [];
      },
    },
  },
  data() {
    return {
      tableTitles: [
        {
          title: "房源信息",
          width: 0,
          key: "title",
          render: (data) => {
            return <com-house-item item={data} houseHref={this.getHref(data)}></com-house-item>;
          },
        },
        {
          title: "来源",
          width: "200",
          key: "externalName",
          render: (data) => {
            return (
              <div>
                <div>{data.newExternalTimeStr}</div>
                <div>来源：{data.externalName}</div>
              </div>
            );
          },
        },
        {
          title: "操作日记",
          width: "300",
          key: "newExternalTimeStr",
          render: (data) => {
            if (data.operated) {
              return <div>时间：{timeStampToDate(data.operateTime)}</div>;
            } else {
              return <div>无</div>;
            }
          },
        },
        {
          title: "操作",
          width: "200",
          key: "查看业主",
          render: (data) => {
            return (
              <el-button type="text" onClick={this.handleClick.bind(this, data)}>
                查看业主
              </el-button>
            );
          },
        },
      ],
    };
  },
  created() {},
  mounted() {},
  watch: {},
  computed: {
    ...mapGetters(["sessionUser"]),
  },
  methods: {
    handleClick(data) {
      menuHandler
        .call(this, HOUSE_OWER_PHONE)
        .then(() => {
          getMemberPower({
            menuId: HOUSE_OWER_PHONE,
          });

          window.open(this.getHref(data), "_blank");
        })
        .catch(() => {});
    },

    getHref({ webExternalInfoUrl, id }) {
      return `${this.shulanJjrGatewayUrl}gatherHouse/index.html?url=${webExternalInfoUrl}&agentId=${this.sessionUser.id}&id=${id}`;
    },
    renderColumn(config) {
      return {
        scopedSlots: {
          default: ({ row }) => {
            if (config.render) {
              return config.render(row);
            }
            return row[config.key];
          },
        },
      };
    },
  },
  render() {
    const { tableTitles, tableList, loading } = this;
    const tableColumns = tableTitles.map((item, index) => {
      return (
        <el-table-column
          width={item.width}
          label={item.title}
          key={index}
          align="center"
          {...this.renderColumn(item)}
        >
        </el-table-column>
      );
    });

    return (
      <el-table
        v-loading={loading}
        border
        highlight-current-row
        data={tableList}
        style="margin-top: 10px"
        header-cell-style={{ background: "#EDF6FF" }}
        scopedSlots={{
          default: () => {
            return tableColumns
          },
        }}
      >
      </el-table>
    );
  },
};
</script>
<style></style>
